<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title></title>
<%@ include file="/WEB-INF/views/include/easyui.jsp"%>
<script type="text/javascript" src="${ctx }/static/plugins/artTemplate/dist/template.js"></script>
<style type="text/css">
.highlight{color: red}
#result{margin-top: 10px}
.result{ margin-top: 10px;border-bottom: 1px solid #ccc;}
</style>
</head>
<body>
	<div>
		<h2>全文检索示例</h2>
		<button type="button" onclick="madeIndex()">生成索引</button>
		全文检索：
		<input type="text" id="title" name="title" /> <button onclick="search()">搜索</button>
	</div>
	<div id="result">
	</div>
	<div id="tipMessage" style="display:none">
	正在搜索...
	</div>
<script id="mainResult" type="text/html">
{{each rows as article}}
	<div class="result">
		<div id="title">{{#article.title}}</div>
		<div id="content">{{#article.content}}</div>
		<div id="createDate">{{article.createDate}}</div>
	</div>
{{/each}}
</script>
<script type="text/javascript">
	function madeIndex(){
		$.get("${ctx}/blog/article/madeIndex",function(data){});
	}
	
	function search(){
		var title=$("#title").val();
		$.ajax({
			url:"${ctx}/blog/article/fullTextSearch",
			data:{title:title},
			success:function(data){
				if(data.rows==0){
					$('#result').html("没有检索到结果");
				}else{
					var html = template('mainResult', data);
					$('#result').html(html); 
				}
			},
			beforeSend: function(){ 
				$("#tipMessage").css("display","block");
			}, 
			complete: function(){ 
				$("#tipMessage").css("display","none");
			}
		});
	}

</script>
</body>
</html>